2.04. Дизайн сайтов
Дизайн сайтов
Дизайн сайта — это системная дисциплина, объединяющая графику, композицию, типографику, цветовую теорию, архитектуру контента и поведенческую логику пользователя. Цель веб-дизайна — создать визуально целостное, функционально понятное и эмоционально выразительное пространство, в котором пользователь может без усилий достигать своих целей: найти информацию, совершить покупку, зарегистрироваться, оставить заявку или просто получить удовольствие от взаимодействия.
Современный подход к дизайну сайта предполагает проектирование опыта взаимодействия, в котором каждая деталь — от отступов до иконки — несёт смысловую, функциональную и эстетическую нагрузку. Дизайн работает тогда, когда пользователь не замечает его — он просто делает то, что ему нужно, не задумываясь о кнопках, меню или цветах.
Важно понимать, что визуальное оформление всегда следует за структурой: сначала определяется, что должно быть на сайте и почему, лишь затем — как это представить. Разделённые компоненты: шапка, хедер, хиро-блок, карточки товаров, футер — не существуют изолированно. Они формируют единую систему, в которой каждый элемент занимает строго отведённое место и выполняет чёткую функцию.
Структура сайта как основа дизайна
Структура сайта — это его скелет. Она определяет логическую иерархию контента и порядок взаимодействия. Пользователь сканирует сайт, выделяя ключевые зоны внимания. Поэтому дизайн должен соответствовать этой модели восприятия: важное — крупно, ярко, вверху; второстепенное — сдержанно, компактно, внизу или по краям.
Стандартная структура большинства сайтов включает следующие компоненты:
Хедер (шапка)
Хедер — верхняя зона сайта, которая присутствует на всех страницах. Здесь размещаются:
- логотип (чаще всего слева),
- навигационное меню (по центру или справа),
- контакты, язык, корзина или личный кабинет (в правом углу).
Хедер обеспечивает постоянный доступ к ключевым разделам и создаёт ощущение стабильности. Он должен быть легко узнаваем и не перегружать пользователя лишней информацией.
Хиро-блок (герой-секция)
Hero-блок — крупный, часто полноэкранный визуальный блок в начале главной страницы. Его цель — немедленно донести ценность сайта. Обычно содержит:
- заголовок (главное сообщение),
- подзаголовок или краткий текст,
- призыв к действию (CTA — Call To Action),
- фоновое изображение, видео или градиент.
Хиро-блок должен отвечать на три вопроса:
- Что это за сайт?
- Почему это важно для вас?
- Что нужно сделать прямо сейчас?
Эффективный хиро-блок не требует прокрутки и сразу формирует первое впечатление.
Блоки контента
Современные сайты строятся из модульных блоков — это своего рода «кирпичи» визуальной композиции. Каждый блок — самостоятельный смысловой и функциональный узел:
- карточки товаров,
- цитаты,
- сравнительные таблицы,
- статистика,
- отзывы,
- формы обратной связи.
Блоки позволяют гибко комбинировать контент, сохраняя визуальную целостность. Они могут повторяться на разных страницах и адаптироваться под разные экраны.
Футер (подвал)
Футер — нижняя часть сайта, в которой размещается вспомогательная, но часто критически важная информация:
- карта сайта (ссылки на разделы),
- юридические документы (политика конфиденциальности, пользовательское соглашение),
- контактные данные,
- социальные сети,
- информация об авторских правах.
Хотя футер редко является целью посещения, он повышает доверие и упрощает навигацию для опытных пользователей.
Визуальное представление: баланс между формой и функцией
Визуальное оформление — это строгая система, в которой каждый элемент подчинён общей логике.
Воздух (отрицательное пространство)
Одна из самых недооцениваемых, но важнейших составляющих хорошего дизайна — воздух, или отрицательное пространство. Это пустое пространство между элементами: отступы между заголовком и текстом, поля вокруг блоков, расстояния между иконками. Воздух не «пустует»:
- снижает когнитивную нагрузку,
- помогает глазу фокусироваться на важном,
- создаёт ощущение лёгкости и порядка.
Плотно набитая страница вызывает тревожность и усталость. Свободное пространство, напротив, усиливает восприятие контента и повышает его ценность.
Визуальный шум
Визуальный шум — это всё, что отвлекает от основного сообщения: мелкие детали, мигающие баннеры, разнокалиберные шрифты, несогласованные цвета, избыток иконок. Чем выше уровень шума, тем сложнее пользователю принять решение. Профессиональный дизайн стремится к минимизации шума, сохраняя при этом выразительность.
Баннеры и реклама
Рекламные элементы — баннеры, модальные окна, всплывающие формы — неизбежная часть коммерческих сайтов. Однако их размещение должно быть деликатным. Навязчивая реклама нарушает флоу (flow) — естественный ход взаимодействия — и приводит к оттоку пользователей. Эффективные баннеры:
- контекстуальны (соответствуют текущему содержанию),
- не блокируют основной контент,
- появляются с задержкой или в ответ на действие,
- легко закрываются.
Навигация и ориентация
Навигация — это система путей, по которым пользователь перемещается по сайту. Хорошая навигация невидима: пользователь просто использует её, как привычную дорогу. Ключевые принципы:
- предсказуемость: меню находится там, где его ждут (вверху, слева),
- иерархия: структура отражает важность разделов (главное — крупно и в начале),
- обратная связь: при наведении или клике пользователь видит, что его действие распознано,
- доступность: навигация должна работать без мыши (с клавиатуры) и быть понятна пользователям с нарушениями зрения.
Часто используются дополнительные элементы:
- хлебные крошки — показывают путь от главной страницы до текущей,
- поиск — особенно важен для сайтов с большим объёмом контента,
- кнопка «Наверх» — облегчает возврат после прокрутки.
Графические элементы
Иконки
Иконки — универсальный язык визуальной коммуникации. Они заменяют текст, экономят место и ускоряют восприятие. Однако они должны быть:
- интуитивно понятными (как шестерёнка для настроек),
- стилистически едиными (одна библиотека, один вес линий),
- достаточно крупными для касания на мобильных устройствах (минимум 24×24 px).
Фотографии и иллюстрации
Изображения несут смысловую функцию. Фотографии должны быть:
- высокого качества,
- релевантными контексту,
- оптимизированы по размеру (без перегрузки скорости загрузки).
Иллюстрации, напротив, позволяют создать уникальный стиль, передать настроение или визуализировать абстрактные понятия (например, «инновации» или «безопасность»).
Логотип и фирменный стиль
Логотип — ядро визуальной идентичности. Он должен быть узнаваем даже в миниатюре и работать на всех фонах. Фирменный стиль (брендбук) определяет:
- основные и дополнительные цвета,
- шрифты (для заголовков, текста, кнопок),
- правила масштабирования логотипа,
- тон голоса в тексте.
Если фирменный стиль не соблюдается, сайт выглядит разрозненно, даже если технически он безупречен.
Типология сайтов по целям и дизайну
Дизайн сайта напрямую зависит от его целевой функции. Ниже — основные категории:
-
Информационные сайты — блоги, СМИ, энциклопедии.
Акцент на читаемость: крупный шрифт, длинные отступы, минимум визуальных отвлечений.
Пример: The Verge, Medium. -
Коммерческие сайты — лендинги, корпоративные сайты.
Цель — конверсия (заявка, звонок, регистрация).
Яркие CTA, чёткая ценность, минимум шагов до действия.
Пример: Apple (корпоративный), Notion (лендинг продукта). -
Интернет-магазины — каталоги товаров с корзиной и оплатой.
Акцент на навигацию по категориям, фильтрацию, фотографии товаров.
Футер часто содержит подкатегории и сервисы (доставка, возврат).
Пример: Amazon, Wildberries. -
Портфолио и творческие сайты — для дизайнеров, фотографов, разработчиков.
Дизайн — часть контента. Здесь важны нестандартные компоновки, анимации, авторский стиль.
Пример: Behance, персональные сайты арт-директоров. -
Социальные и комьюнити-платформы — форумы, соцсети, образовательные площадки.
Акцент на пользовательский контент: аватарки, ленты, реакции, комментарии.
Дизайн вторичен по отношению к функциональности.
Пример: Reddit, Discord.
Адаптивность: единый дизайн для множества экранов
Адаптивный дизайн — это фундаментальный принцип современной веб-разработки. Пользователи заходят на сайты с самых разных устройств: от 4-дюймовых смартфонов до 32-дюймовых десктопных мониторов. Дизайн должен оставаться функциональным, читаемым и эстетически целостным на всех из них.
Адаптивность достигается за счёт гибкой компоновки, которая перестраивается в зависимости от ширины экрана. Это реализуется через:
- медиа-запросы (media queries) — CSS-правила, активирующиеся при определённой ширине экрана,
- относительные единицы измерения —
em,rem,%,vwвместо фиксированныхpx, - флексибельные сетки и компоненты — элементы, которые перестраиваются, сжимаются или скрываются в зависимости от доступного пространства.
В профессиональной практике выделяют несколько точек разрыва (breakpoints) — пороговых значений ширины, при которых макет изменяется:
| Категория | Типичная ширина | Особенности дизайна |
|---|---|---|
| Мобильные устройства (portrait) | ≤ 480 px | Одноколоночная структура, крупные кнопки, скрытое меню (гамбургер), минимум текста |
| Мобильные устройства (landscape) / малые планшеты | 481–768 px | Возможна двухколоночная компоновка, изображения адаптируются под горизонтальное пространство |
| Планшеты | 769–1024 px | Более сложная навигация, появляются боковые панели, увеличивается количество видимого контента |
| Десктопы (small) | 1025–1440 px | Полноценная многоколоночная сетка, расширенное меню, виджеты в сайдбара́х |
| Десктопы (large) / ультраширокие мониторы | ≥ 1441 px | Центрированный контент с боковыми полями, использование пространства для визуальных акцентов, параллакс-эффекты |
Важно: адаптивность — это про приоритезацию контента. На мобильном устройстве первостепенное — действие («купить», «заказать звонок»); второстепенное — справочная информация (о компании, контакты) — может быть скрыто в аккордеонах или перемещено в футер.
Существует также концепция прогрессивного улучшения: базовая версия сайта должна работать даже на старых устройствах, а современные браузеры получают дополнительные визуальные и интерактивные возможности (анимации, векторная графика, градиенты).
Дизайн-макет и визуальная концепция
Дизайн-макет — это графическое представление будущего сайта, созданное до начала вёрстки или программирования. Он служит единой референсной точкой для всех участников проекта: заказчика, дизайнера, разработчика, копирайтера.
Профессиональные макеты создаются в специализированных инструментах — Figma, Adobe XD, Sketch — и включают:
- сетку (grid), определяющую вертикальные и горизонтальные ритмы,
- типографическую шкалу — набор размеров шрифтов для заголовков, подзаголовков, основного текста,
- палитру цветов — с указанием основных, акцентных и нейтральных оттенков,
- компонентную библиотеку — повторяющиеся элементы (кнопки, карточки, формы) в едином стиле,
- состояния интерактивных элементов — hover, active, disabled.
Макет должен передавать логику компоновки, иерархию и взаимосвязи. Главная задача — убедиться, что структура соответствует целям сайта и поведению целевой аудитории.
Bootstrap
Хотя Bootstrap часто упоминается как CSS-фреймворк, его значение в контексте дизайна гораздо шире. Bootstrap — это визуально-компонентная система, которая стандартизирует подход к построению интерфейсов. Она включает:
- адаптивную 12-колоночную сетку, автоматически перестраивающуюся под разные экраны,
- готовые UI-компоненты — кнопки, формы, карточки, модальные окна, навигационные панели,
- согласованную типографику и отступы, основанные на принципах вертикального ритма,
- темизацию через CSS-переменные, позволяющую быстро менять цветовую схему.
Для дизайнера Bootstrap — это основа для ускорения работы. Он позволяет сосредоточиться на уникальных элементах (иллюстрациях, анимациях, нестандартных интеракциях), доверив базовую структуру проверенной системе. При этом Bootstrap легко кастомизируется: можно отключить ненужные модули, переопределить стили или даже использовать только сетку.
Важно: Bootstrap обеспечивает функциональную целостность. Один и тот же компонент может выглядеть как минималистичный слэш-сайт или как яркий маркетплейс — всё зависит от кастомизации.
Favicon
Favicon (от favorites icon) — это небольшое изображение (обычно 16×16 или 32×32 пикселя), отображаемое в:
- вкладке браузера,
- закладках,
- истории посещений,
- адресной строке (в некоторых браузерах).
Несмотря на миниатюрный размер, favicon играет ключевую роль в узнаваемости бренда и когнитивной привязке. Пользователь, видя знакомый значок, быстрее находит нужный сайт среди десятков вкладок.
Профессиональный favicon:
- основан на логотипе или его ключевом элементе (буква, символ),
- читаем даже в 16 пикселей (избегаются мелкие детали),
- сохраняется в формате
.ico(для совместимости) и.png(для прозрачности), - поддерживает несколько размеров (16×16, 32×32, 48×48, 192×192 для Android),
- размещается в корне сайта (
/favicon.ico) или подключается через<link rel="icon">.
Отсутствие favicon — признак незавершённости. Наличие качественного favicon — признак внимания к деталям и уважения к пользователю.
Флагманские примеры и популярные подходы
Современный веб-дизайн развивается под влиянием нескольких ключевых трендов:
-
Минимализм и «тихий дизайн»
Отказ от избыточной анимации, градиентов и теней. Акцент на типографике, пространстве и контенте. Примеры: Apple, Google Search, Notion. -
Глубина через слои и мягкие тени
Использование subtle-трансформаций для создания ощущения объёма без перегрузки. Примеры: Figma, Linear. -
Типографический экспрессионизм
Широкое использование кастомных шрифтов, переменных шрифтов и нестандартных компоновок текста. Примеры: A24, Bruno Simon. -
Иллюстрации как бренд-идентичность
Уникальные стилизованные иллюстрации заменяют фотографии и создают запоминающийся образ. Примеры: Dropbox, Slack (ранние версии). -
Dark mode как стандарт
Поддержка тёмной темы — ожидание. Она снижает утомляемость глаз и повышает контрастность на OLED-экранах. -
Сканируемость и F-паттерн
Дизайн строится с учётом того, что пользователь сканирует страницу по форме буквы «F» — слева вверху, затем горизонтально, потом вниз по левому краю. Важные элементы размещаются в зонах высокого внимания.
Визуальная иерархия: управление вниманием без слов
Визуальная иерархия — это упорядоченная система приоритетов, построенная с помощью графических средств: размера, цвета, контраста, позиции и движения. Её цель — направлять взгляд пользователя по заранее заданной траектории, обеспечивая последовательное усвоение информации.
Основной принцип: важное — видно сразу. Пользователь не должен искать главный заголовок или кнопку действия — они должны доминировать в композиции. Это достигается через:
- Масштаб: заголовок в два–три раза крупнее основного текста;
- Контраст: тёмный текст на светлом фоне (или наоборот) читается лучше, чем приглушённые тона;
- Позиционирование: верхний левый и центральный верхний сегменты — зоны первичного внимания;
- Изоляция: элемент, окружённый воздухом, воспринимается как более значимый;
- Цвет: акцентный цвет (например, оранжевый на серо-белом фоне) автоматически привлекает взгляд.
Хорошо выстроенная иерархия позволяет пользователю понять суть страницы за 3–5 секунд, не читая весь текст. Это критически важно: согласно исследованиям, среднее время удержания внимания на новой веб-странице составляет менее 15 секунд.
Цвет как системный элемент дизайна
Цвет в веб-дизайне — функциональный инструмент. Он выполняет три ключевые роли:
- Эмоциональная — цвет вызывает ассоциации (синий — доверие, зелёный — рост, красный — срочность);
- Организационная — разные разделы или типы контента могут быть закодированы цветом;
- Навигационная — активные и неактивные состояния элементов интерфейса различаются по цвету.
Профессиональная цветовая система включает:
- Основной цвет — обычно берётся из логотипа, используется для CTA, заголовков;
- Вторичные цвета — для поддержки основного тона (например, градиенты, тени);
- Нейтральная палитра — оттенки серого для фона, текста, рамок;
- Семантические цвета — зелёный (успех), красный (ошибка), жёлтый (предупреждение).
Важный аспект — доступность. Цветовая контрастность между текстом и фоном должна соответствовать стандартам WCAG (Web Content Accessibility Guidelines): минимум 4.5:1 для обычного текста и 3:1 для крупного. Это гарантирует читаемость для людей с нарушениями зрения.
Цвет также влияет на восприятие скорости: тёплые тона (красный, оранжевый) ускоряют восприятие, холодные (синий, фиолетовый) — замедляют. Это учитывается при проектировании страниц с призывом к немедленному действию.
Типографика
Типографика — это архитектура текста. Она определяет то, как читается сообщение. В веб-дизайне типографика включает:
-
Выбор шрифтов — не более двух: один для заголовков, один для основного текста. Часто используются:
- С засечками (serif) — для элегантности, традиционности (например, Georgia, Times New Roman);
- Без засечек (sans-serif) — для чистоты, современности (например, Inter, Roboto, Helvetica);
- Моноширинные — для технического контента (код, терминал).
-
Типографская шкала — иерархия размеров:
- H1 — 32–48 px (главный заголовок),
- H2 — 24–32 px (подразделы),
- H3 — 20–24 px (мелкие секции),
- Body — 16–18 px (основной текст),
- Caption — 12–14 px (подписи, примечания).
-
Межстрочный интервал (line-height) — оптимально 1.5–1.6 для основного текста. Слишком маленький — текст «слипается», слишком большой — нарушается связность.
-
Длина строки (measure) — 50–75 символов на строку. Длинные строки утомляют глаз, короткие — мешают ритму чтения.
-
Выравнивание — по левому краю для большинства языков. Центрирование допустимо только для заголовков и коротких CTA. Выравнивание по ширине создаёт «реки» пробелов и снижает читаемость.
Хорошая типографика делает текст невидимым: пользователь воспринимает смысл, а не форму букв.
Графическая композиция: баланс, ритм и гармония
Композиция сайта — это расстановка элементов в пространстве таким образом, чтобы создать ощущение равновесия, движения и целостности. Профессиональные приёмы включают:
- Золотое сечение и правило третей — деление экрана на 3×3 зоны; ключевые элементы размещаются на пересечениях;
- Визуальный баланс — тяжёлые (тёмные, крупные) элементы компенсируются лёгкими (светлыми, воздушными);
- Ритм — повторение отступов, размеров, форм создаёт предсказуемость и комфорт;
- Направляющие линии — взгляд пользователя следует за линиями компоновки: от логотипа к меню, от заголовка к CTA.
Важно избегать симметричной мёртвости: абсолютно симметричные макеты выглядят статично и скучно. Лёгкая асимметрия добавляет динамики и живости.
Визуальная целостность: как всё «склеивается»
Хороший сайт воспринимается как единое целое, даже если состоит из десятков страниц. Эта целостность достигается через:
- Повторение — одни и те же отступы, радиусы скруглений, стили кнопок на всех страницах;
- Согласованность — все иконки в одном стиле (линейные, заполненные, outlined), все заголовки — с одинаковым весом и отступом;
- Единая система мер — отступы кратны 8 или 4 px (8-пиксельная сетка), что создаёт ритм;
- Контролируемый контраст — не «всё яркое», а чёткое разделение на фон, контент и акцент.
Когда эти принципы соблюдены, пользователь не замечает перехода между разделами — он остаётся в одном визуальном пространстве.
Дизайн по целям: как задача определяет форму
Каждый сайт создаётся с определённой целью. Эта цель — измеримый результат: получить заявку, продать товар, донести информацию, удержать внимание. Дизайн должен быть подчинён этой цели без отклонений. Ниже — анализ ключевых типов сайтов и соответствующих им дизайнерских стратегий.
1. Лендинг (одностраничный промо-сайт)
Цель: преобразовать внимание в действие за минимальное время (форма, звонок, покупка).
Особенности дизайна:
- Минимум отвлекающих элементов: нет глобального меню, боковых сайдбаров, ссылок на другие страницы;
- Чёткий визуальный путь (visual flow): взгляд движется от заголовка → подзаголовок → CTA → доводы → повторный CTA;
- Много воздуха: фон часто однотонный или размытый, чтобы не конкурировать с текстом;
- Доминирующая CTA-кнопка: контрастная, крупная, повторяется в ключевых точках (в шапке, после доводов, в футере);
- Доводы в виде иконок и коротких блоков: «Быстро», «Безопасно», «Поддержка 24/7» — легко сканируются;
- Социальное доказательство: отзывы, логотипы клиентов, цифры («10 000 довольных пользователей»).
Пример визуальной структуры:
[Хедер без меню, только логотип и кнопка «Заказать»]
[Хиро-блок: заголовок + подзаголовок + форма/кнопка]
[Преимущества — 3–4 блока с иконками]
[Отзывы — карусель или карточки]
[Финальный CTA с усилением срочности: «Осталось 3 места!»]
[Футер с юридической информацией]
Любое отклонение от цели — снижение конверсии. Дизайн лендинга — это визуальный логический аргумент.
2. Интернет-магазин
Цель: помочь пользователю быстро найти нужный товар, сравнить его и совершить покупку.
Особенности дизайна:
- Навигация по категориям и фильтрам — ключевая зона; часто вынесена в хедер или левый сайдбар;
- Карточка товара как самостоятельный интерфейс: изображение, название, цена, рейтинг, кнопка «В корзину» — всё в одном блоке;
- Многоуровневая визуальная иерархия: категория → подкатегория → фильтры → сортировка → товары;
- Минимизация трений: возможность добавить в корзину без перехода на отдельную страницу товара;
- Индикаторы прогресса покупки: «Корзина → Доставка → Оплата → Готово»;
- Доверие через детали: способы оплаты, условия возврата, отзывы, сертификаты — видимы на каждом этапе.
Важный нюанс: не перегружать главную страницу товарами. Главная — для категорий и акций; каталог — для поиска.
Цвета и типографика подчинены читаемости и нейтральности: пользователь должен фокусироваться на товаре.
3. Блог или СМИ
Цель: обеспечить комфортное и длительное чтение, стимулировать вовлечённость (комментарии, подписка, шеринг).
Особенности дизайна:
- Типографика как основа: крупный шрифт (18–20 px), межстрочный интервал 1.6, длина строки 60–70 символов;
- Минимум визуального шума: фон белый или слегка тёплый, иконки и баннеры — только по необходимости;
- Чёткая структура статьи: заголовок → лид (краткое введение) → основной текст → цитаты/изображения → вывод;
- Боковые зоны (если есть): только для релевантного контента — «Похожие статьи», «Автор», «Подписка»;
- Социальные кнопки — ненавязчиво, внизу статьи или в виде плавающей панели (не в начале!);
- Тёмный режим — всё чаще становится стандартом для снижения утомляемости при ночной читке.
Главная страница блога — это лента контента, где каждая запись представлена анонсом: заголовок, лид, дата, метки, изображение. Дизайн помогает пользователю быстро отфильтровать интересное.
4. Корпоративный сайт
Цель: донести репутацию, компетенции и контактную информацию; вызвать доверие.
Особенности дизайна:
- Сдержанная цветовая палитра: синий, серый, тёмно-зелёный — цвета стабильности и профессионализма;
- Фотографии реальных сотрудников и офисов, а не стоковые изображения «людей в костюмах»;
- Структура по бизнес-логике: «О компании» → «Услуги» → «Кейсы» → «Команда» → «Контакты»;
- Юридическая и финансовая прозрачность: ИНН, ОГРН, реквизиты — легко найти (часто в футере);
- Многоуровневое меню — допустимо, так как аудитория (B2B) ищет конкретную информацию.
Здесь дизайн работает как визуальный аналог делового костюма: строго, без излишеств, но с безупречной посадкой.
5. Портфолио (для креативных профессий)
Цель: продемонстрировать качество работ и индивидуальность автора.
Особенности дизайна:
- Работы — главный контент: крупные изображения или видео, минимум текста на главной;
- Уникальная компоновка: сетка карточек, горизонтальный скролл, асимметрия — всё допустимо, если оправдано;
- Минимум UI-элементов: навигация часто скрыта или стилизована под часть композиции;
- Анимации и интерактив — как часть бренда (но без перегрузки);
- «Обо мне» — кратко и по делу: не автобиография, а профессиональное позиционирование.
Важно: даже в креативном дизайне должна быть логика навигации. Пользователь не должен гадать, как посмотреть проект.
Общие принципы кросс-типового дизайна
Несмотря на различия, все типы сайтов подчиняются универсальным законам:
- Скорость восприятия — за 5 секунд пользователь должен понять: что это, зачем и что делать.
- Сканируемость — 80 % пользователей не читают, а сканируют; дизайн должен поддерживать эту модель.
- Предсказуемость — стандартные элементы (логотип слева, меню сверху, контакты в футере) не нужно переизобретать.
- Контроль внимания — каждая секция должна направлять взгляд к следующей точке.
- Отсутствие внутренней конкуренции — на экране не должно быть двух равнозначных CTA или заголовков.